<!--
 * @Author: hutong huareu980@163.com
 * @Date: 2023-06-06 09:54:52
 * @LastEditors: hutong huareu980@163.com
 * @LastEditTime: 2023-06-06 10:04:12
 * @FilePath: /smart-web-app/components/nav.vue
 * @Description: 
-->
<template>
  <ul class="nav-list">
    <li
      v-for="item in tabList"
      :key="item.id"
      @mouseenter="onMouseenter(item.id)"
      @mouseleave="onMouseleave"
    >
      <nuxt-link :to="item.url"> {{ $t(item.name) }}<span></span> </nuxt-link>
    </li>
    <div class="nav-child">12312</div>
  </ul>
</template>

<script setup lang="ts">
const tabList = ref([
  {
    id: "index",
    url: "/",
    name: "nav.home.name",
    children: [],
  },
  {
    id: "core",
    url: "/core/1",
    name: "nav.core.name",
    children: [
      {
        id: "1",
        url: "/core/1",
        name: "nav.core.child.item1",
      },
      {
        id: "2",
        url: "/core/2",
        name: "nav.core.child.item1",
      },
      {
        id: "3",
        url: "/core/3",
        name: "nav.core.child.item3",
      },
    ],
  },
  {
    id: "about",
    url: "/about/1",
    name: "nav.about.name",
    children: [
      {
        id: "1",
        url: "/about/1",
        name: "nav.about.child.item1",
      },
      {
        id: "2",
        url: "/about/2",
        name: "nav.about.child.item1",
      },
      {
        id: "3",
        url: "/about/3",
        name: "nav.about.child.item3",
      },
    ],
  },
  {
    id: "contact",
    url: "/contact/1",
    name: "nav.contact.name",
    children: [
      {
        id: "1",
        url: "/contact/1",
        name: "nav.contact.child.item1",
      },
      {
        id: "2",
        url: "/contact/2",
        name: "nav.contact.child.item1",
      },
      {
        id: "3",
        url: "/contact/3",
        name: "nav.contact.child.item3",
      },
    ],
  },
]);

const onMouseenter = () => {};

const onMouseleave = () => {};
</script>
<style scoped lang="scss">
.nav-list {
  display: flex;
  margin-top: 10px;
  position: relative;
  .nav-child {
    position: absolute;
    top: 50px;
    left: 0;
    height: 200px;
    width: 1200px;
    background-color: red;
  }
  li {
    margin: 0 20px;
    cursor: pointer;
    a {
      position: relative;
      display: block;
      font-size: 16px;
      font-weight: 600;
      height: 37px;
      line-height: 42px;
      text-align: center;
      color: #565656;
      border-bottom: 2px solid #fff;
      transition: all 500ms ease 0ms;
      span {
        position: absolute;
        width: 8px;
        height: 8px;
        bottom: -6px;
        left: 44%;
        background-color: #fff;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        transition: all 500ms ease 0ms;
      }
    }
    a {
      &:hover {
        color: $primary;
        border-bottom-color: $primary;
        span {
          border-color: $primary;
        }
      }
    }
  }
  // .nav-active {
  //   color: $primary;
  //   font-weight: bold;
  // }
}
</style>
